<template>
  <basic-container v-if="!editModel">
    <avue-crud
      ref="crud"
      :table-loading="tableLoading"
      :data="tableData"
      :page.sync="page"
      :option="tableOption"
      @on-load="onLoad"
      @current-change="currentChange"
      @size-change="sizeChange"
      @row-save="rowSave"
      @selection-change="selectionChange"
    >
      <template slot="menuLeft">
        <el-button
          type="info"
          size="small"
          plain
          icon="el-icon-s-promotion"
          @click="handleDeployment"
        >发布</el-button>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button style="margin-left:10px;" size="small" type="text" icon="el-icon-edit" @click.native="designModel(scope.row)">设计</el-button>
      </template>
    </avue-crud>
  </basic-container>
  <div class="h-100p" v-else-if="editModel">
    <rs-activiti :modelId="modelId" @saved="modelSaved"></rs-activiti>
  </div>
</template>

<script>

import { getList , createModel , deployment } from '@/api/process/models'

export default {

  data(){
    return {
      tableLoading: false,
      tableData: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      tableOption: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: false,
        index: true,
        selection: true,
        editBtn: false,
        // addBtn: false,
        viewBtn: false,
        // delBtn: false,
        // dialogWidth: 900,
        menuWidth: 150,
        dialogClickModal: false,
        column: [
          {
            label: '模型名称',
            prop: 'name',
            span: 24
          },
          {
            label: '描述',
            prop: 'description',
            type: "textarea",
            span: 24,
            minRows: 6,
          },
          {
            label: '状态',
            prop: 'status',
            width: 80,
            editDisplay: false,
            addDisplay: false,
            dicData: [
              {
                label: '设计中',
                value: '1'
              },
              {
                label: '已发布',
                value: '2'
              }
            ]
          },
          {
            label: '创建时间',
            prop: 'createDate',
            editDisplay: false,
            addDisplay: false
          },
          {
            label: '创建人',
            prop: 'createBy',
            editDisplay: false,
            addDisplay: false
          },
        ],
        // size: 'mini'
      },
      editModel: false,
      modelId: '',
      selectionList: []
    }
  },
  mounted(){
    // getList()
  },
  methods: {
    onLoad(page){
      this.tableLoading = true;
      getList(page.currentPage, page.pageSize).then(
        res => {
          this.tableData = res.data.datalist;
          this.tableLoading = false;
        }
      )
    },
    designModel(row){
      this.modelId = row.modelId;
      if(this.modelId){
        this.editModel = true;
      }else{
        this.$message({
          type: 'error',
          message: '模型数据错误，请选择其他模型'
        })
      }
    },
    modelSaved(){
      this.editModel = false;
    },
    saveModelCallback(){
      console.log(this.model);
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    rowSave(form,done,loading){
      let model = {
        name: form.name,
        key: 'process' + Date.now(),
        description: form.description,
        roleIds: []
      }
      createModel(model).then(
        res => {
          if(res.data && res.data.code === 0 && res.data.data){
            loading();
            done(res.data.data)
          }
        }
      )
    },
    handleDeployment(){
      if(this.selectionList.length < 1){
        this.$message({
          type: 'info',
          message: '请选择一条数据'
        })
        return;
      }
      if(this.selectionList.length > 1){
        this.$message({
          type: 'info',
          message: '只能选择一条数据'
        })
        return;
      }
      let id = this.selectionList[0]['modelId'];
      this.$confirm('确定要发布该流程？' , '发布流程' , {
        beforeClose: (action , instance , done) => {
          if(action === 'confirm'){
            instance.confirmButtonLoading = true;
            deployment(id).then(
              res => {
                instance.confirmButtonLoading = false;
                if(res.data.code === 0){
                  this.$message({
                    type: 'success',
                    message: '发布成功'
                  });
                  done();
                }
              }
            ).catch(() => {
              instance.confirmButtonLoading = false;
              done();
              // this.$message({
              //   type: 'success',
              //   message: '发布成功'
              // });
            })
          }else{
            done();
          }
        }
      });
    },
    selectionChange(list) {
      this.selectionList = list;
    },
  }

}
</script>